<!DOCTYPE html>
<html><head>
	<meta charset="utf-8">
	<title>Lost in the Clouds - Error 404</title>
	<meta name="description" content="Simple and aesthetic template with animated background">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="/css/404.css">	
	<link type="text/css" rel="stylesheet" href="/css/style_sky.css">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata&amp;v1">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Candal&amp;v1">
	
	<!--[if lte IE 8]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>
	<div id="container">		
		<div id="ticket">
			<section id="ticket_left">
				<p class="text1_a">Lost in the clouds</p>
				<p class="text2_a">Flight not found</p>
				<p class="text3_a">Error 404</p>
				<p class="text4_a">Sorry!</p>
				<p class="text5_a">From</p>
				<p class="text6_a">Somewhere</p>
				<p class="text7_a">To</p>
				<p class="text8_a">Nowhere</p>			
				<p class="text9_a">Seat</p>
				<p class="text10_a">404</p>
				<p class="text11_a">Try another flight</p>
				<nav class="text12_a">
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Portfolio</a></li>
					</ul>
				</nav>			
			</section>
			
			<section id="ticket_right">
				<p class="text1_b">First class</p>
				<p class="text2_b">Lost in the clouds</p>
				<p class="text3_b">From</p>
				<p class="text4_b">Somewhere</p>
				<p class="text5_b">To</p>
				<p class="text6_b">Nowhere</p>
				<p class="text7_b">Seat</p>
				<p class="text8_b">404</p>
				<p class="text9_b">1</p>
				<p class="text10_b">103076498</p>
			</section>
		</div>
		
	</div>
	<div id="container">
		<!--
			So we will have an animated background with 5 clouds moving across the screen.
			Steps: 
			1. create the clouds
			2. Animate them to move across the screen
			3. Stylize the clouds(can be done as step #2 also)
			-->
			<div id="clouds">
				<div class="cloud x1"></div>
				<!-- Time for multiple clouds to dance around -->
				<div class="cloud x2"></div>
				<div class="cloud x3"></div>
				<div class="cloud x4"></div>
				<div class="cloud x5"></div>
			</div>
	</div>
	<script src="/js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script src="/js/jquery.spritely-0.5.js" type="text/javascript"></script>

	<script type="text/javascript">
		(function($) {
			$(document).ready(function() {
				//$('#clouds').pan({fps: 40, speed: 0.7, dir: 'right', depth: 10});
			});
		})(jQuery);	
	</script>
	
</body>
</html>